<template>
<div class=''>
  <el-table :data="articles.list" border style="width: 100%" stripe="true">
    <el-table-column align="center" prop="id" label="序号" width="80"></el-table-column>
    <el-table-column align="center" prop="country" label="国家" width="80"></el-table-column>
    <el-table-column align="center" prop="province" label="省份" width="80"></el-table-column>
    <el-table-column align="center" prop="city" label="市"></el-table-column>
    <el-table-column align="center" prop="area" label="区"></el-table-column>
    <el-table-column align="center" prop="confirmed" label="新增确诊"></el-table-column>
    <el-table-column align="center" prop="suspected" label="疑似"></el-table-column>
    <el-table-column align="center" prop="dead" label="死亡" ></el-table-column>
    <el-table-column align="center" prop="cure" label="治愈"></el-table-column>
    <el-table-column align="center" prop="severe" label="重症"></el-table-column>
    <el-table-column align="center" prop="outside" label="境外输入"></el-table-column>
    <el-table-column align="center" prop="inputTime" label="上报时间"></el-table-column>
  </el-table>
  
  <el-pagination  background layout="prev, pager, next" :total="1000"></el-pagination>
<el-button type="primary">上报</el-button>
</div>
</template>

<script>
import { get } from '@/utils/request';
export default{
//组件名称
name:'demo',
//组件参数接收来自父组件的数据
props:{},
//组件状态值
data(){
return{
  articles:{ list:[] },
  param:{
    page:1,
    pageSize:10
  }
}
},
//计算属性
computed:{},
//侦听器
watch:{},
//组件方法
methods:{
  currentChange(page){
      this.param.page = page;
      this.loadArticles();
    },
  loadArticles(){
    let url ="http://121.196.164.250:8001/epidemic/pageQuery";
    get(url,this.param).then(resp =>{
      this.articles = resp.data;
    })
  }
},
//以下是生命周期钩子
/**
*组件实例创建完成，属性已绑定，但DOM还未生成，el属性还不存在
*/
created(){
},
/**
*el被新创建的vm.el替换，并挂载到实例上去之后调用该钩子。
*如果root实例挂载了一个文档内元素，当mounted被调用时vm.el也在文档内。
*/
mounted(){
  this.loadArticles();
},
/**
*实例销毁之前调用。在这一步，实例仍然完全可用。
*/
beforeDestroy(){
},
/**
*Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，
*所有的事件监听器会被移除，所有的子实例也会被销毁。
*/
destroyed(){
}
}
</script>

<!--Add"scoped"attributetolimitCSStothiscomponentonly-->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>

</style>
